<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery方法练习</title>
    <style>
        body {
            height: 1000px;
        }

        .container {
            display: flex;
            flex-direction: row;
        }

        .add {
            width: 20px;
            height: 20px;
            background-color: pink;
        }

        .item {
            width: 50px;
            height: 50px;
            border: 2px solid beige;
            box-sizing: border-box;
        }

        .container div:nth-child(5) {
            width: 50px;
            height: 50px;
        }

        .border {
            border: 2px solid blue;
            box-sizing: border-box;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item" title="hhhhh"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <p title="hhhhh">
    </p>
    <!-- <p>
        Once there was a <em title="huge, gigantic">large</em> dinosaur...
    </p>
    The title of the emphasis is:<div></div> -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"
        integrity="sha512-v2CJ7UaYy4JwqLDIrZUI/4hqeoQieOmAZNXBeQyjo21dadnwR+8ZaIJVT8EE2iyI61OV8e6M8PP2/4hpQINQ/g=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
        //addClass
        $(".item:first").addClass("add border")
        $(".item:eq(1)").addClass(function (index, currentClass) {
            let addedClass;
            if (currentClass === "item") {
                addedClass = "border add";
            }
            return addedClass;
        })
        //css
        $(".item:eq(1)").click(function () {
            let color = $(this).css("background-color");
            $(".item:eq(2)").css("background-color", color);
        })
        //hasClass
        console.log($(".item:first").hasClass("add border"));
        //innerHeight 内高，包括padding,没有border    outerHeight包括padding，border和选择性的margin
        console.log($(".item:first").innerHeight());
        console.log($(".item:first").outerHeight());
        //innerWidth 内高，包括padding,没有border     outerWidth包括padding，border和选择性的margin
        console.log($(".item:first").innerWidth());
        $(".item:first").css('margin', '10px')
        console.log($(".item:first").outerWidth(true));
        //height 获取匹配元素集合中的第一个元素的当前计算高度值或设置每一个匹配元素的高度值
        //width 获取匹配元素集合中的第一个元素的当前计算宽度值或设置每一个匹配元素的宽度值
        console.log($(".item:first").height());
        console.log($(".item:first").width());
        $(".item:eq(2)").height("60px");
        $(".item:eq(2)").width("60px");
        //escapeSelector
        console.log($("div").find("." + $.escapeSelector(".item")));
        //offset 获取的第一个元素的当前坐标
        console.log($(".item:eq(3)").offset());
        //removeClass
        $(".item:eq(4)").removeClass('item')
        //position获取匹配元素中第一个元素的当前坐标，相对于offset parent的坐标。( 译者注：offset parent指离该元素最近的而且被定位过的祖先元素 )
        console.log($(".item:eq(5)").position());
        //scrollLeft 获取匹配的元素集合中第一个元素的当前水平滚动条的位置或设置每个匹配元素的水平滚动条位置
        console.log($(".item:eq(6)").scrollTop("20px"));
        //attr 获取匹配的元素集合中的第一个元素的属性的值  或 设置每一个匹配元素的一个或多个属性
        console.log($("p").attr("title"));
        //prop 获取匹配的元素集中第一个元素的属性（property）值或设置每一个匹配元素的一个或多个属性
        //获取表单属性
        console.log($(".item:eq(8)").prop("width"));
        // let title = $("em").attr("title");console.log(title);
        // $("div").text(title);
    </script>
</body>

</html>